<template>
    <div class="first-template">
        <div class="title-box" :class="!padding ? 'no-padding': ''">
            <slot name="title"></slot>
        </div>
        <div class="content">
            <slot name="content"></slot>
        </div>
    </div>
</template>
<script>
export default {
    name: 'firstTemplate',
    props: {
        padding: {
            type: Boolean,
            default () {
                return true
            }
        }
    }
}
</script>
<style lang="less" scoped>
.first-template {
    width: 100%;
    min-height: 100%;
    background: #fff;
    .title-box {
        height: 60px;
        width: 100%;
        padding: 0 20px;
        border-bottom: 1px solid #E9EDF4;
        line-height: 60px;
        &.no-padding {
            padding: 0;
        }
    }
    .content {
        height: 100%;
    }
    .tab {
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
        .tab-item {
            float: left;
            width: 100px;
            height: 100%;
            text-align: center;
            font-size: 16px;
            color: #333;
            cursor: pointer;
            &.current {
                color: #1298FC;
            }
        }
        .current-line {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100px;
            height: 3px;
            background: #1298FC;
            border-radius: 1.5px;
            transition: left .3s;
            &.current-line-0 {
                left: 0;
            }
            &.current-line-1 {
                left: 100px;
            }
        }
        .add-project {
            float: right;
            margin-top: 15px;
        }
    }
}
</style>